<template>
	<view>
	 <view >  
					
  <view class="layui-row layui-col-space15 clearfix">
            <view class="layui-col-md8 left">
                <view data-fontsize="14" class="article-detail shadow">
                    <view class="article-tool">
                        <view style="float:left;">
                            <button class="layui-btn layui-btn-primary layui-btn-xs" title="发布日期">
                                {{news.adddate}}
                            </button>
                            <view class="layui-btn-group">
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="浏览">
                                    <i class="fa fa-eye fa-fw"></i><span style="margin-left:3px;">{{news.views}}</span>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="评论">
                                    <i class="fa fa-thumbs-up fa-fw"></i><span style="margin-left:3px;">{{news.thumbsup}}</span>
                                </button>
                            </view>
                        </view>
                        <view class="tool-box">
                            <view class="layui-btn-group layui-hide-xs">

                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="字体缩小">
                                    <i class="fa fa-minus fa-fw"></i>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="字体还原">
                                    <i class="fa fa-undo fa-fw"></i>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="字体放大">
                                    <i class="fa fa-plus fa-fw"></i>
                                </button>
                            </view>
                            <view class="layui-btn-group layui-hide-xs">
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="展开阅读">
                                    <i class="fa fa-arrows-h fa-fw"></i>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="全屏阅读">
                                    <i class="fa fa-arrows-alt fa-fw"></i>
                                </button>
                            </view>
                        </view>
                    </view>
                    <view class="article-detail-title">
                        {{news.title}}
                    </view>
                    <view class="article-detail-abstract">
                        <span class="layui-badge">摘要</span>
                        <span id="abstract">
                            {{news.description}}
                        </span>
                    </view>
                    <view class="article-detail-content w-e-text">
                    	<ad  unit-id='{{_cardad}}' type="card"></ad>
							
      <u-read-more show-height="600">
     <rich-text :nodes="htmlNodes"></rich-text>
    </u-read-more>
                        </view>
                         <view class="article-detail-copyright">
                            <p>版权声明：本文由爱上歆随懿恫原创出品，转载请注明出处！</p>
                            <p>欢迎关注学点博客了解更多！</p>
                        </view> 
                    </view>
                </view>
                <view class="article-component">
                    <view class="component-box">
                        <!-- <view  class="praise" blog-event="praise" ><i class="fa fa-thumbs-up fa-fw"></i>点赞（<span id="praiseCnt">{{news.thumbsup}}</span>）</view>
  					 -->	 <view class="reword" @tap="dialogConfirm" blog-event="reword">赞</view> 
                        <!-- <view class="share" blog-event="share"><i class="fa fa-share-alt fa-fw"></i>分享（<span id="shareCnt">0</span>）</view>
                    </view> -->
                </view>

         
            <view class="layui-col-md4 right">
					<ad  unit-id="50c83f4c1de632415c551073afcc73d2" type="feeds"></ad>
                <view class="layui-row layui-col-space10">
                    <view class="layui-col-sm6 layui-col-md12">
                        <view class="blog-card shadow">
                            <view class="blog-card-title">博文推荐</view>
                            <ul class="blog-card-ul">
                                <li v-if="lastarticle!=null">
                                    <span class="layui-badge  ">下</span><span @click="goDetail(lastarticle)">{{lastarticle.title}}</span>
                                </li>
                                <li v-if="nextarticle!=null">
                                    <span class="layui-badge  ">上</span><span  @click="goDetail(nextarticle)">{{nextarticle.title}}</span>
                                </li>
                            </ul>
                        </view>
                    </view>
 

                </view>
                <!--右边悬浮 平板或手机设备显示-->
                <!-- <view class="category-toggle"><i class="fa fa-chevron-left"></i></view> -->
            </view>

							<!-- 消息提示 -->
		<uni-popup id="popupMessage" ref="popupMessage" type="message" >
			<uni-popup-message :type="msgType" :message="message" :duration="2000"></uni-popup-message>
		</uni-popup>
				<!-- 对话框 -->
		<uni-popup id="popupDialog" ref="popupDialog" type="dialog">
			<uni-popup-dialog :type="msgType" :title="title" :content="message" :before-close="true" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view>

	</view>
</template>

<script>
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	 import htmlParser from '@/common/html-parser'
	export default {
		components: {},
		data() {
			return {
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ffa200',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ff0000',
						color: '#fff'
					}
				]
			}
		},
		onLoad() {},
		methods: {
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
		.banner {
		/* height: 150rpx; */
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%; height: 200px;
	}

	.banner-title {
	
		overflow: hidden;
		position: absolute;
		left: 30rpx;
		bottom: 30rpx;
		width: 95%;
		font-size:17px;
		font-weight: 400;
		line-height: 20px;
		color: white;
		z-index: 11;
	}

	.article-meta {
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
	}

	.article-text {
		font-size: 26rpx;
		line-height: 50rpx;
		margin: 0 20rpx;
	}

	.article-author,
	.article-time {
		font-size: 30rpx;
	}

	.article-content {
		padding: 0 30rpx;
		overflow: hidden;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}
</style>